<template>
  <page-header-wrapper :title="false">
    <div class="Role">
      <typicalSearch ref="insideSearch" :searchConfig="searchConfig" @searchMethod="getData"></typicalSearch>
      <div class="table">
        <div class="tableTitle">
          <div class="title">组织电量统计</div>
        </div>
        <div class="tableList">
          <a-spin tip="加载中..." class="position" v-if="roleLoading"> </a-spin>

          <Electric :electricData="electricData"></Electric>
        </div>
      </div>
    </div>
  </page-header-wrapper>
</template>
<script>
import moment from 'moment';
import typicalSearch from '@/components/typicalSearch';
import typicalTable from '@/components/typicalTable';
import Input from '@/components/typicalControl/Input';
import InputNumber from '@/components/typicalControl/InputNumber';
import treeSelect from '@/components/typicalControl/treeSelect';
import Select from '@/components/typicalControl/select';
import Button from '@/components/typicalControl/button';
import { getYesNo } from '@/utils/frequentInterface';

import { organizationsTree, statistics } from '@/api/system';
import Electric from '../networkElectric/electric.vue';
export default {
  name: 'RunningState',
  components: {
    typicalSearch: typicalSearch,
    typicalTable: typicalTable,
    Input: Input,
    InputNumber: InputNumber,
    treeSelect: treeSelect,
    Select: Select,
    Button: Button,
    Electric,
  },
  data() {
    return {
      roleLoading: false, // 加载表格的loading
      originationCode: '',
      electricData: [],
      start: 0,
      end: 5,
      form: {},
      // 搜索组件配置
      searchConfig: {
        formItemList: [
          {
            type: 'select',
            prop: 'searchStatistic',
            value: 'MONTH',
            label: '统计方式',
            optList: [
              { name: '年', code: 'YEAR' },
              { name: '月', code: 'MONTH' },
              { name: '日', code: 'DAY' },
            ],
            change: this.modeChange,
          },
          {
            type: 'datePicker',
            dateType: 'month',
            prop: 'searchStartDate',
            valueFormat: 'YYYYMM',
            format: 'YYYY-MM',
            value: moment(new Date()).format('YYYY-MM'),
            label: '开始时间',
            change: this.datePickerChange,
          },
          {
            type: 'datePicker',
            dateType: 'month',
            prop: 'searchEndDate',
            valueFormat: 'YYYYMM',
            format: 'YYYY-MM',
            value: moment(new Date()).format('YYYY-MM'),
            label: '结束时间',
            change: this.datePickerChange,
          },
          {
            type: 'selectTree',
            prop: 'searchOrganization',
            value: undefined,
            label: '所属组织',
            treeData: [],
            select: this.treeSelect,
          },
        ],
        parent: this,
      },

      oDictionary: {
        listNetworksAll: [],
      },
    };
  },
  created() {
    this.getDictionary();
  },
  mounted() {
    this.$refs.insideSearch.searchInfo();
  },
  methods: {
    /**
     * [getDictionary 获取各种字典]
     * @return {[type]} [description]
     */
    getDictionary() {
      // 组织列表树形结构数据
      organizationsTree().then((res) => {
        if (res.code === 200) {
          for (var i = 0; i < this.searchConfig.formItemList.length; i++) {
            if (this.searchConfig.formItemList[i].prop === 'searchOrganization') {
              this.searchConfig.formItemList[i].treeData = res.data;
              break;
            }
          }
        }
      });
    },
    getData(searchParam) {
      this.roleLoading = true;
      let endTime = '';
      if (searchParam.searchStatistic == 'YEAR') {
        endTime = moment(searchParam.searchEndDate).endOf('year');
      } else if (
        searchParam.searchStatistic == 'MONTH' &&
        moment(new Date()).format('YYYY-MM-DD') != moment(searchParam.searchEndDate).format('YYYY-MM-DD')
      ) {
        endTime = moment(searchParam.searchEndDate).endOf('month');
      } else {
        endTime = searchParam.searchEndDate;
      }
      let params = {
        statisticsMode: searchParam.searchStatistic,
        startDate: this.formatterTime(searchParam.searchStartDate),
        endDate: this.formatterTime(endTime),
        organizationCode: searchParam.searchOrganization ? this.originationCode : '',
      };
      statistics('/quantity/organization/List', 'post', params)
        .then((res) => {
          this.electricData = res.data;
        })
        .finally(() => {
          this.roleLoading = false;
        });
    },

    formatterTime(val) {
      return val ? moment(val).format('YYYY-MM-DD') : '';
    },
    treeSelect(e) {
      this.originationCode = e.code;
    },
    datePickerChange() {},
    modeChange(e) {
      switch (e) {
        case 'YEAR':
          this.searchConfig.formItemList[1].dateType = 'year';
          this.searchConfig.formItemList[1].valueFormat = 'YYYY';
          this.searchConfig.formItemList[1].format = 'YYYY';
          this.searchConfig.formItemList[1].value = moment(new Date()).format('YYYY');

          this.searchConfig.formItemList[2].dateType = 'year';
          this.searchConfig.formItemList[2].valueFormat = 'YYYY';
          this.searchConfig.formItemList[2].format = 'YYYY';
          this.searchConfig.formItemList[2].value = moment(new Date()).format('YYYY');
          break;

        case 'MONTH':
          this.searchConfig.formItemList[1].dateType = 'month';
          this.searchConfig.formItemList[1].valueFormat = 'YYYYMM';
          this.searchConfig.formItemList[1].format = 'YYYY-MM';
          this.searchConfig.formItemList[1].value = moment(new Date()).format('YYYY-MM');

          this.searchConfig.formItemList[2].dateType = 'month';
          this.searchConfig.formItemList[2].valueFormat = 'YYYYMM';
          this.searchConfig.formItemList[2].format = 'YYYY-MM';
          this.searchConfig.formItemList[2].value = moment(new Date()).format('YYYY-MM');
          break;
        case 'DAY':
          this.searchConfig.formItemList[1].dateType = 'date';
          this.searchConfig.formItemList[1].valueFormat = 'YYYYMMDD';
          this.searchConfig.formItemList[1].format = 'YYYY-MM-DD';
          this.searchConfig.formItemList[1].value = moment(new Date()).format('YYYY-MM-DD');

          this.searchConfig.formItemList[2].dateType = 'date';
          this.searchConfig.formItemList[2].valueFormat = 'YYYYMMDD';
          this.searchConfig.formItemList[2].format = 'YYYY-MM-DD';
          this.searchConfig.formItemList[2].value = moment(new Date()).format('YYYY-MM-DD');
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.table {
  flex: 1;
  height: calc(100vh - 220px);

  background: white;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  .tableTitle {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ececec;
    padding: 0 20px;
    margin-bottom: 10px;
    .title {
      width: 80%;
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: 550;
    }
  }
  .tableList {
    width: 100%;
    height: 80%;
    text-align: center;
  }
}
.nodata {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
